<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><!-- 设备自适应 -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 引入layui的核心css样式 -->
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <!--引入bootstrap核心样式-->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 引入阿里矢量图形css样式 -->
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2805753_dace6d9ebe9.css"/><!--引入jquery的核心js文件-->
    <script src="../js/jquery-3.6.0.js" type="application/javascript"></script>
    <!--bootstrap核心js库-->
    <script type="application/javascript" src="../js/bootstrap.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!-- [if lt IE 9]> -->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><!-- <![endif] -->
    <script type="application/javascript" src="../js/backIndex.js"></script>
    <title>后台管理员登录</title>
</head>
<body>

<div class="layui-layout layui-layout-admin"><!-- 导航栏 -->
    <div class="layui-header layui-bg-orange"><!-- 后台logo -->
        <div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 20px;"> 网站后台管理系统</div>

        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left"><!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i
                    class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-inline layui-text" id="getTime" style="font-size: 40px;">在此处显示实时动态时间</li>
        </ul><!-- 导航栏中的右侧部分 -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;" id="user">
                <img
                    src="../img/default.png" class="layui-nav-img">admin</a>
                <dl class="layui-nav-child">
                    <dd><a href="#" id="btn">管理员信息</a></dd>
                    <dd><a href="">网站首页</a></dd>
                    <dd><a href="">退出</a></dd>
                </dl>
            </li><!-- 导航栏三个点 -->
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i
                    class="layui-icon layui-icon-more-vertical"></i></a></li>
        </ul>
    </div>

    <div class="layui-side">
        <div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test"><!-- 用户管理-->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-tubiaozhizuomobanyihuifu-"
                                                                     style="font-size: 15px;"></i> 用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="user_list" onclick="navigation()">用户列表</a></dd>
                    </dl>
                </li><!-- 用户视频管理 -->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-shipin_huaban1"
                                                                     style="font-size: 15px;"></i> 视频管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="video_list" onclick="navigation(id)">视频列表</a></dd>
                    </dl>
                </li><!-- 用户音乐管理 -->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-yinyue"
                                                                     style="font-size: 15px;"></i> 音乐管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="music_list" onclick="navigation(id)">音乐列表</a></dd>
                    </dl>
                </li><!-- 用户相册管理 -->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-daichuli"
                                                                     style="font-size: 15px;"></i> 相册管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="picture_list" onclick="navigation(id)">照片列表</a></dd>
                    </dl>
                </li><!-- 订单管理 -->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-dingdan"
                                                                     style="font-size: 15px;"></i> 订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="order_list" onclick="navigation(id)">订单列表</a></dd>
                    </dl>
                </li><!-- 数据备份 -->
                <li class="layui-nav-item"><a href="javascript:;"><i class="iconfont icon-beifen"
                                                                     style="font-size: 15px;"></i> 数据库管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">备份设置</a></dd>
                        <dd><a href="javascript:;">系统设置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

        <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding: 15px;height: 100%">
            <iframe id="myframe" scrolling="no" frameborder="0" width="100%" height="100%"
                    style="overflow-x: scroll" src='user_list.html'></iframe>
        </div>
    </div>
</div>

<!-- 管理员信息模态窗口 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center" id="myModalLabel">管理员信息</h4>
            </div>
            <div class="modal-body">
                <!-- 使用form表单，添加用户 表单水平-->
                <form action="#" class="form-horizontal" role="form">
                    <!-- 姓名 -->
                    <div class="form-group">
                        <label for="username" class="col-md-3 control-label">管理员名称</label>
                        <div class="col-md-8">
                            <input type="text" id="username" name="username" class="form-control col-md-1" placeholder="请输入新的管理员名称">
                        </div>
                    </div>
                    <!-- 密码 -->
                    <div class="form-group">
                        <label for="pwd" class="col-md-3 control-label">管理员密码</label>
                        <div class="col-md-8">
                            <input type="text" id="pwd" name="pwd" class="form-control col-md-1" placeholder="请输入新的管理员密码,默认admin123">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="sub">信息更新</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
    <script src="../layui/layui.js"></script>
    <script> /*JS */
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;/*头部事件*/
            util.event('lay-header-event', {/*左侧菜单事件*/ menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', {icon: 0});
                }, menuRight: function () {
                    layer.open({
                        type: 1,
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt' /*右上角*/,
                        anim: 5,
                        shadeClose: true
                    });
                }
            });
        });

    /* 打开模态窗口 */
    $("#btn").click(function() {
        $('#myModal').modal('show')
    })

    /* 添加用户后关闭 */
    $("#sub").click(function() {
        $('#myModal').modal('hide')
    })
    </script>
</body>
</html>
